<template>
  <div class="app-container">
    <vxe-layout-container>
      <vxe-layout-aside class="bg2">
        <vxe-form
          v-bind="formOptions"
          @reset="resetEvent"
          @submit="submitEvent"
        />
      </vxe-layout-aside>
      <vxe-layout-container vertical>
        <div class="flex" style="margin: 12px">当前选中</div>
      </vxe-layout-container>
    </vxe-layout-container>
  </div>
</template>

<script>
  import { VxeUI } from 'vxe-pc-ui'
  import { getList as getProducts } from '@/api/product'
  import { doAdd } from '@/api/device'
  import { convertArr2Obj } from '@/utils/index'
  export default {
    data() {
      this.getProducts()
      const formOptions = {
        data: {
          product_pid: '',
          product_id: '',
          amount: 10,
          gw_serialno: '',
        },
        items: [
          {
            field: 'product_pid',
            title: '设备类型',
            span: 24,
            itemRender: {
              name: 'VxeSelect',
              options: this.products,
              optionProps: {
                label: 'name',
                value: 'id',
              },
              props: {
                placeholder: '设备类型',
                clearable: true,
                filterable: true,
              },
              events: {
                change: this.handleProductChange,
              },
            },
          },
          {
            field: 'product_id',
            title: '版本选择',
            span: 24,
            itemRender: {
              name: 'VxeRadioGroup',
              props: { type: 'button', size: 'small' },
              options: this.children,
              optionProps: {
                label: 'name',
                value: 'id',
              },
            },
          },
          {
            field: 'amount',
            title: '设备数量',
            span: 24,
            itemRender: {
              name: 'VxeNumberInput',
              props: { type: 'integer', clearable: true, min: 1, max: 100 },
            },
          },
          {
            align: 'left',
            span: 24,
            itemRender: {
              name: 'VxeButtonGroup',
              options: [
                { type: 'submit', content: '提交', status: 'primary' },
                { type: 'reset', content: '重置' },
              ],
            },
          },
        ],
      }
      return {
        formOptions,
        products: [],
        children: [],
        activeName: 'first',
      }
    },
    methods: {
      submitEvent() {
        doAdd(this.formOptions.data).then((res) => {
          const { data, msg } = res
          console.log(data)
          VxeUI.modal.message({
            content: msg,
            status: 'success',
          })
        })
      },
      resetEvent() {
        VxeUI.modal.message({ content: '重置事件', status: 'info' })
      },
      async getProducts() {
        const {
          data: { data },
        } = await getProducts({ pagesize: 100, pid: 0 })
        this.products = data
          .filter((val) => {
            return val.children.length > 0
          })
          .map((val) => {
            const { id, name, children } = val
            return { id, name, children }
          })

        this.formOptions.items[0].itemRender.options = this.products
        const defaultValue = this.products.filter((val) => {
          return val.name === '球阀'
        })[0]
        this.formOptions.data.product_pid = defaultValue.id
        this.formOptions.items[1].itemRender.options = defaultValue.children
        this.children = defaultValue.children
        this.formOptions.data.product_id = this.children[0].id
      },
      handleProductChange({ field, data }) {
        const product_id = data[field]
        const obj = convertArr2Obj(
          this.formOptions.items[0].itemRender.options,
          'id'
        )
        const children = obj[product_id]['children']
        this.formOptions.items[1].itemRender.options = children
        this.children = children
        this.formOptions.data.product_id = this.children[0].id
        // 在这里添加你想要执行的逻辑
      },
    },
  }
</script>
<style lang="scss" scoped>
  .app-container {
    display: flex;
  }

  .bg2 {
    width: 560px;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
</style>
